<template>
	<gui-modal titleStyle="font-size:36rpx;line-height:120rpx;font-weight:600;" :canCloseByShade="false"
		:customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal1" title="充值保证金">
		<template v-slot:content>
			<view
				class="gui-padding gui-dark-bg-level-2 gui-flex gui-align-items-center gui-border-t gui-border-b gui-form-item">
				<text class="gui-form-label gui-secondary-text">充值金额</text>
				<view class="gui-form-body">
					<input type="number" class="gui-form-input" v-model="money" placeholder="请输入金额" />
				</view>
				<text class="gui-form-icon gui-icons gui-text-center gui-color-gray" v-if="money.length >= 1"
					@click="clear">&#xe78a;</text>
			</view>
		</template>

		<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
		<template v-slot:btns>
			<view class="gui-flex gui-row gui-space-between gui-padding">
				<view hover-class="gui-tap" class="modal-btns gui-flex1 gui-flex gui-justify-content-center">
					<text class="modal-btns gui-color-gray" @tap="close">取消</text>
				</view>
				<view hover-class="gui-tap" class="modal-btns gui-flex1 gui-flex gui-justify-content-center">
					<text class="modal-btns gui-primary-color" @tap="confirm">确认</text>
				</view>
			</view>
		</template>
	</gui-modal>
</template>

<script>
	export default {
		name: "hyb-bzj",
		props: {
			title: {
				type: String,
				default: "",
			},

			tag: {
				type: String,
				default: "yg",
			},
		},
		data() {
			return {
				money: ""
			};
		},
		methods: {
			clear() {
				this.money = "";
			},
			close() {
				this.$refs.guimodal1.close();
			},
			open(callback,money) {
				this.callback = callback;
				if(money) this.money = money;
				this.$refs.guimodal1.open();
			},
			confirm() {
				let data = {
					money: this.money,
					tag: this.tag
				};
				uni.$pay.pay("pay/baozhengjin", data,1).then(() => {
					this.close();
				})
			}
		}
	}
</script>

<style>
</style>
